<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{vendor/jq/jquery-3.4.1.js}"></script>
    <script th:inline="javascript">
        $(document).ready(function(){
            $("#Battery").click(function (e) {
                e.preventDefault();
                console.log(e)
                $("#test").load("solution1.html");
                window.location.hash="product1.html"
            })
        })
    </script>
    <style>
.demoContainer{
    display: flex;
    background-color: #f3f5f6;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.demoContainer h1{
    font-size: 35px;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    color: #3a3939;
    border-bottom-style: solid;
    border-bottom-color: #5ea8f1;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-width: 5px;
}
.box{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.box-item{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    /*justify-content: center;//控制主轴对齐*/
    align-items: center;//控制交叉轴对齐
    border: #274eee solid;
    /*padding: 10px;//页面内容距离边框*/
    margin: 10px;//item之间相距距离
}
.box-item:hover {
    background-color: #297df6;
    transition: 0.3s;
}
.box-item:hover span{
    color: #fff;
}
.box-item span{
    color: #2c2a2a;
    display: flex;
    font-size: 30px;
    justify-content: center;//控制主轴对齐
}
.box-item h5{
    margin: 10px;
    color: #666;
    display: flex;
    font-size: 15px;
    justify-content: center;//控制主轴对齐
}
.box-item img{
    align-items: center;
    margin: 20px;
}
.box-item img:hover{
   width: 310px;
   height: 300px;
    transition: 0.3s;
}

    </style>
</head>
<body>
<div class="demoContainer">
    <h1>行业解决方案</h1>
    <div class="box">
        <div class="box-item" id="Battery">
            <img th:src="@{img/solutions/电池pack.jpg}"  width="300px" height="300px" alt="...">
            <span>电池生产</span>
        </div>
        <div class="box-item">
            <img th:src="@{img/solutions/能源储备.jpg}"  width="300px" height="300px" alt="...">
            <span>能源储备</span>
        </div>
        <div class="box-item">
            <img th:src="@{img/solutions/电子制造.jpg}"  width="300px" height="300px" alt="...">
            <span>电子行业</span>
        </div>
        <div class="box-item">
            <img th:src="@{img/solutions/医疗器械.jpg}"  width="300px" height="300px" alt="...">
            <span>医疗器械</span>
        </div>
    </div>
</div>
</body>
</div>
</html>